<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
       .one{
           width: 980px;
           height: 500px;
           border: 1px solid #ddd;
           margin: 20px auto;
           /*弹性盒模型  主要是给父类的属性，让子类元素横向排列*/
           display: flex;

       }

       .one > div{
           width: 400px;
           height: 300px;
           border: 1px solid red;

       }

    </style>


</head>
<body>

<!--父容器-->
<div class="one">
    <!--子容器-->
    <div></div>
    <div></div>
    <div></div>
</div>


</body>
</html>